<script setup lang="ts">
import ChartLhz from '../../components/ChartLhz.vue'
import {computed} from "vue";

const props = defineProps(["chart_option"])
const { chart_option } = props
const options = computed(() => {

  // 提取chart_option中的数据
  const names = chart_option[6] || []; // ['温和', '好', '恶劣', '较差']
  const values = chart_option[2] || []; // [92, 114, 56, 67]

  // 创建data数组
  const data1 = names.map((name, index) => ({
    value: values[index],
    name: name,
  }));

 let option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: {
        color: 'white' // 默认颜色
      },
    },
   toolbox: {
     feature: {
       saveAsImage: {}
     }
   },
    series: [
      {
        name: '20~30℃时空气状况分布',
        type: 'pie',
        radius: '50%',
        data:data1,
        // data: [
        //   // { value: 1048, name: 'Search Engine' },
        //   // { value: 735, name: 'Direct' },
        //   // { value: 580, name: 'Email' },
        //   // { value: 484, name: 'Union Ads' },
        //   // { value: 300, name: 'Video Ads' }
        //   { value: chart_option[1][0], name: chart_option[6][0] },
        //   { value: chart_option[1][1], name: chart_option[6][1] },
        //   { value: chart_option[1][2], name: chart_option[6][2] },
        //   { value: chart_option[1][3], name: chart_option[6][3] },
        // ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  console.log(chart_option)
  return option
})
</script>

<template>
  <chart-lhz :chart_option="options" v-if="chart_option"></chart-lhz>
</template>

<style scoped lang="scss">

</style>